<template>
    <div>
        <div style="background:#FF4C50;color:#ffffff;height:180px;margin:0 auto">
          <div style="width:1200px;margin:0 auto">
            <div style="float:left;padding:50px 0">
              <p style="font-size:26px;font-weight:600;line-height:2em">Focus on us</p>
              <p style="font-size:22px">关注我们</p>
            </div>
            <div style="float:right;padding:58px">
              <div style="display:inline-block;font-size:18px;vertical-align:middle;margin-right:20px;line-height:1.4em">
                <p>扫描二维码关注我们</p>
                <p>获取更多羽绒服资讯</p>
              </div>
              <img src="../../images/officalPic/napinCode.jpg" alt="" style="width:80px;vertical-align:middle">
            </div>
          </div>
          
          
        </div>
        <el-row style="width:1200px;margin:0 auto;padding:57px 0;border-bottom:1px solid #cecece;color:#333333">
          <el-col :span="6" class="center">
            <div style="position:relative">
              <img src="../../images/officalPic/napin.png" alt="" style="width:70px;margin-top:10px">
              <div class="code1"><img src="@/images/officalPic/napinCode.jpg" alt=""></div>
              <div class="code1"><img src="@/images/officalPic/downCode.png" alt=""></div>
              <div class="code1"><img src="@/images/officalPic/ios_download.png" alt=""></div>
              <div class="code1"><img src="@/images/officalPic/weibo.png" alt=""></div>
              <el-row style="width:65%;margin:0 auto;margin-top:60px">
                <el-col :span="6"><img class="bottomPic" src="../../images/officalPic/weixinGary.png" alt="" @mouseover="bottomMouseover(0)" @mouseout="bottomMouseout(0)"></el-col>
                <el-col :span="6"><img class="bottomPic" src="../../images/officalPic/androidGary.png" alt="" @mouseover="bottomMouseover(1)" @mouseout="bottomMouseout(1)"></el-col>
                <el-col :span="6"><img class="bottomPic" src="../../images/officalPic/IosGary.png" alt="" @mouseover="bottomMouseover(2)" @mouseout="bottomMouseout(2)"></el-col>
                <el-col :span="6"><img class="bottomPic" src="../../images/officalPic/weiboGary.png" alt="" @mouseover="bottomMouseover(3)" @mouseout="bottomMouseout(3)"></el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :span="6" class="center">
            <ul>
              <li class="bottomListTitle"><router-link to=""></router-link>公司相关</li>
              <li class="bottomLists"><router-link to="/aboutUs">关于我们</router-link></li>
              <li class="bottomLists"><router-link to="/joinUs">加入我们</router-link></li>
              <li class="bottomLists">商务合作</li>
            </ul>
          </el-col>
          <el-col :span="6" class="center">
            <ul>
              <li class="bottomListTitle">温馨提示</li>
              <li class="bottomLists">服务条款</li>
              <li class="bottomLists">社区规范</li>
              <li class="bottomLists">隐私政策</li>
            </ul>
          </el-col>
          <el-col :span="6" class="center" style="border:none">
            <ul style="">
              <li class="bottomListTitle">内容相关</li>
              <li class="bottomLists"><router-link to="/getActicle">社区精选</router-link></li>
            </ul>
          </el-col>
        </el-row>
        <div style="width:70vw;margin:0 auto;padding:3vw 0;font-size:14px;color:#333333">
          <span>©备案信息 杭州蓝后网络科技有限公司</span>
          <span style="float:right;">地址：{{napinAddress}}</span>
        </div>
    </div>
</template>

<script>
export default {
  name: 'pageBottom',
  data () {
    return {
      
    }
  },
  methods:{
    bottomMouseover:function(i){
      var code=document.getElementsByClassName('code1');
      console.log(code)
      for(var j=0;j<code.length;j++){
         code[j].style.display="none";
        if(i==j){
          code[i].style.display="block";
        }
      }
    },
    bottomMouseout:function(i){
      var code=document.getElementsByClassName('code1');
      for(var j=0;j<code.length;j++){
         code[j].style.display="none";
      }
    }
  },
  props:['napinAddress']

}
</script>

<style scoped lang="scss">
.code1{
  width:120px;
  height:120px;
  text-align: center;
  line-height: 120px;
  position:absolute;
  top:0px;
  left:90px;
  display:none;

  img{
    width:100px;
    margin-top:10px;
  }
}
.bottomPic{
  cursor: pointer;
}
.bottomListTitle{
  font-size:18px;
  // font-weight: 500;
  line-height:3em;
  font-weight:600;
}
.bottomLists{
  font-size:14px;
  line-height: 3em;
}
.center{
  text-align: center;
  border-right:1px solid #cecece;
  height:180px;
  li{
    cursor: pointer;
    color:#333333;
    a{
      text-decoration: none;
      color:#333333;
    }
  }
}
</style>
